<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<!-- !
    @ 特点
    ? cookie中最多只能存储4kb
    ? cookie中的数据只能是文本字符
    ? cookie中的数据是有过期时间的
    ? cookie中的数据是会随着当前网页中的http请求，自动传输到服务器
    ? cookie中的数据是有过期时间的，默认到会话结束就会过期，可以通过expires设置每个cookie值的过期时间
    @ 作用
    ? 在浏览器中存储临时数据（用户基本token）
! -->
<script>
    // 获取cookie的值
    console.log(document.cookie);

    //保存到cookie
    document.cookie = "name=ljq;expires =" + new Date(new Date().getTime ()+ 5 * 60 * 1000)
    document.cookie = "age=14"
    // document.cookie = "name=zh"//同名会有覆盖现象
    document.cookie = "sex=true"
    document.cookie = "hobby=" + JSON.stringify([{ a: [], b: {}, c: "safs" }, {}, {}])

    // 获取cookie的值
    console.log(document.cookie);

    //功能: 传入一个属性名， 返回这个屈性名对应的值
    function getCookie(key) {
        //1.获取cookie中的所有值（字符串类型）
        var c = document.cookie
        //2.将字符串分割， 用分号+空格 分割、
        var arr = c.split('; ')
        //3.遍历第二步得到的数组，将数组中每个字符串用 = 进行分割，将分割得到的属性名作为对象的属性名。将分割得到的属性值作为对象 的属性值
        var obj = {}
        arr.forEach((item) => {
            var arr2 = item.split('=')
            obj[arr2[0]] = arr2[1]
        })
        return obj[key]
    }
    console.log(getCookie('name'));
    console.log(getCookie('age'));
    console.log(getCookie('hobby'));
</script>